<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>腾讯官网</title>
    <!--根据自己的项目目录修改-->
    <!--表示引用css文件-->
    <link rel="stylesheet" href="layui/css/layui.css" media="all"/>
</head>

<body>
<div class="layui-tab layui-tab-brief" lay-filter="changeTab">
    <ul class="layui-tab-title">
        <li class="layui-this">网站设置</li>
        <li>武侠列表</li>
        <li>新增武侠</li>
        <li>商品管理</li>
        <li>系统管理</li>
    </ul>

    <div class="layui-tab-content">
        <div class="layui-tab-item">

        </div>
        <div class="layui-tab-item layui-show">
            <iframe src="pages/personsList.html" frameborder="0" id="personIframe"
                    style="height: 800px" width="100%" height scrolling="yes"></iframe>
        </div>
        <div class="layui-tab-item">
            <iframe src="pages/addPerson.html" frameborder="0" id="personUpdateIframe"
                    style="height: 800px" width="100%" height="100%" scrolling="no"></iframe>
        </div>
        <div class="layui-tab-item">
            <iframe src="pages/personsList.html" frameborder="0" id="goodsIframe"
                    style="height: 800px" style="min-height:880px" width="100%" height="100%" scrolling="no"></iframe>
        </div>
        <div class="layui-tab-item">内容5</div>
    </div>
</div>


<script src="layui/layui.js"></script>
<script src="js/lib/jquery-2.1.1.min.js"></script>
<script src="utils/common.js"></script>
<script>
    layui.use(['table', 'layer', 'form', 'laypage', 'element'], function () {
        var table = layui.table;
        var form = layui.form;
        // 表示引用选项卡模块
        var element = layui.element;

        // frame高度自适应初始化
        iframeInit('personIframe');
        iframeInit('personUpdateIframe');
        iframeInit('goodsIframe');

        // 监听选项卡切换事件
        element.on('tab(changeTab)', function (data) {
            console.log(this); //当前Tab标题所在的原始DOM元素
            console.log(data.index); //得到当前Tab的所在下标
            console.log(data.elem); //得到当前的Tab大容器
        });

        // 计算页面的实际高度，iframe自适应会用到
        function calcPageHeight(doc) {
            return (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;
        }

        function iframeInit(id) {
            //根据ID获取iframe对象
            var ifr = document.getElementById(id);
            ifr.onload = function () {
                //解决打开高度太高的页面后再打开高度较小页面滚动条不收缩
                ifr.style.height = '0px';
                var iDoc = ifr.contentDocument || ifr.document;
                var height = calcPageHeight(iDoc);
                ifr.style.height = height * 0.9 + 'px';
            };
        }

        window.onresize = function () {
            console.log("自适应方法启动")
            iframeInit('personIframe');
            iframeInit('personUpdateIframe');
            iframeInit('goodsIframe');
        }
    });

</script>
</body>
</html>